<template>
  <div class="home">
    <!-- 头部 -->
    <div class="header">
      <!-- 标题 -->
      <div class="header-title">
        <p class="p1" id="robotxj">南市机器人巡检监控</p>
      </div>
    </div>
    <!-- 内容区域 -->
    <div class="content">
      <!-- 左边 -->
      <div class="contentLsft">
        <!-- 机器人数据-->
        <div class="Robot-par">
          <div class="par-title">
            <p>综合数据</p>
            <el-select  v-model="Selection" placeholder="选择" @change="handleChange">
              <el-option v-for="item in robotList" :key="item.id" :label="item.robot_name" :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="par-conter">
            <div class="par-conter1">
              <img src="../images/robot.png" alt="">
              <div class="par-conterText">
                <p><router-link :to="'/nssc/bggl/report'">巡检报告({{ form1.bgsl }})</router-link></p>
              </div>
            </div>
            <div class="par-conter2">
              <img src="../images/gaojin.png" alt="">
              <div class="par-conterText">
                <p><router-link :to="'/nssc/alarmData'">报警信息({{ form1.bjsl }})</router-link></p>
              </div>
            </div>
            <div class="par-conter1">
              <img src="../images/bfgj.png" alt="">
              <div class="par-conterText">
                <p><router-link :to="'/nssc/bfgl/alarmInformation'">漏水报警({{ form1.lsgjsl }})</router-link></p>
              </div>
            </div>
            <div class="par-conter1">
              <img src="../images/bufang.png" alt="">
              <div class="par-conterText">
                <p><router-link :to="'/nssc/bfgl/guanlang'">管廊预览({{ form1.glylsl }})</router-link></p>
              </div>
            </div>
            <div class="par-conter3">
              <img v-if="this.online == -1 || this.robotid == null" src="../images/camera.png" alt="">
              <img v-else src="../images/camera1.png" alt="">
              <div class="par-conterText">
                <p v-if="this.online == -1 || this.robotid == null" style="font-size: 12px;
                                  font-family: PangMenZhengDao;
                                  font-weight: 400;
                                  color: #bdbbbb;
                                  -webkit-background-clip: text;">摄像头离线</p>
                <span v-else style="font-size: 12px;
                                  font-family: PangMenZhengDao;
                                  font-weight: 400;
                                  color:#4AF4BE;
                                  -webkit-background-clip: text;
                                  ">摄像头在线</span>
              </div>
            </div>
            <div class="par-conter4">
              <img v-if="robot_state == 1" src="../images/online.png" alt="">
              <img v-else src="../images/notonline.png" alt="">
              <div class="par-conterText">
                <p v-if="robot_state == 1" style="font-size: 12px;
                                  font-family: PangMenZhengDao;
                                  font-weight: 400;
                                  color:#4AF4BE;
                                  -webkit-background-clip: text;
                                  "><router-link :to="'/nssc/robotcontrol'">机器人控制</router-link></p>
                <p v-else style="font-size: 12px;
                                  font-family: PangMenZhengDao;
                                  font-weight: 400;
                                  color: #bdbbbb;
                                  -webkit-background-clip: text;"><router-link :to="'/nssc/robotcontrol'">机器人控制</router-link></p>
              </div>
            </div>
          </div>
        </div>
        <!-- 机器人运行数据 -->
        <div class="Robot-ope">
          <div class="ope-title">
            <p>机器人运行数据</p>
          </div>
          <div class="ope-conter">
            <div class="ope-conter1">
              <div class="ope-conter1-1">
                <p>{{ jqrsd }}</p>
              </div>
              <div class="ope-conter1-2">
                <p>速度设定</p>
              </div>
            </div>
            <div class="ope-conter2">
              <div class="ope-conter1-1">
                <p>{{ jqrfx }}</p>
              </div>
              <div class="ope-conter1-2">
                <p>方向</p>
              </div>
            </div>
            <div class="ope-conter3">
              <div class="ope-conter1-1">
                <p>{{ jqrms }}</p>
              </div>
              <div class="ope-conter1-2">
                <p>模式</p>
              </div>
            </div>
            <div class="ope-conter4">
              <div class="ope-conter1-1">
                <p>{{ djzs }}</p>
              </div>
              <div class="ope-conter1-2">
                <p>转速</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="contentCenter">
        <!-- 监控画面 -->
        <div class="center-video">
          <!-- 监控画面 -->
          <div class="box">
            <video v-show="videoShow" style="width:98%;height:98%"  class="video-js" id="videoHK" controls></video>
          </div>
        </div>
        <!-- 电子轨道图 -->
        <div class="center-Trd">
          <!-- 图标部分 -->
          <div class="Trd-icon">
            <div class="Trd-icon1">
              <!--              <div class="Trd-icon1-1">
                              <img src="../images/contorll.png" alt="">
                              <p style="color: #dcdcdc">巡检点</p>
                            </div>
                            <div class="Trd-icon1-2">
                              <img src="../images/contorl.png" alt="">
                              <p style="color: #dcdcdc">机器人</p>
                            </div>-->
              <div class="Trd-icon1-3">
                <span></span>
                <p style="color: #dcdcdc">位移<font style="color: #5DCBFF"> {{ sswy }}</font> m</p>
              </div>
              <div class="Trd-icon1-4">
                <span></span>
                <p style="color: #dcdcdc">电压
                  <font style="color: #138047;" v-if="dcdy > 70">{{ dcdy }}</font>
                  <font style="color: #0e8618;" v-else-if="dcdy > 50">{{ dcdy }}</font>
                  <font style="color: #29ab33;" v-else-if="dcdy > 40">{{ dcdy }}</font>
                  <font style="color: #46cc51;" v-else-if="dcdy > 30">{{ dcdy }}</font>
                  <font style="color: #9eee25;" v-else-if="dcdy > 20">{{ dcdy }}</font>
                  <font style="color: #a5f1a6;" v-else-if="dcdy > 15">{{ dcdy }}</font>
                  <font style="color: #5DCBFF;" v-else-if="dcdy=='无'">{{ dcdy }}</font>
                  <font style="color: #e19532;" v-else>{{ dcdy }}</font>
                  v</p>
              </div>
              <div class="Trd-icon1-5">
                <span></span>
                <p style="color: #dcdcdc">电量
                  <font style="color: #30a96a;" v-if="dcdl > 80">{{ dcdl }}</font>
                  <font style="color: #46cc51;" v-else-if="dcdl > 70">{{ dcdl }}</font>
                  <font style="color: #9eee25;" v-else-if="dcdl > 60">{{ dcdl }}</font>
                  <font style="color: #9eee25;" v-else-if="dcdl > 50">{{ dcdl }}</font>
                  <font style="color: #a5f1a6;" v-else-if="dcdl > 30">{{ dcdl }}</font>
                  <font style="color: #e19532;" v-else-if="dcdl > 20">{{ dcdl }}</font>
                  <font style="color: #5DCBFF;" v-else-if="dcdl=='无'">{{ dcdl }}</font>
                  <font style="color: #de5c23;" v-else>{{ dcdl }}</font>
                  %</p>
              </div>
              <div class="Trd-icon1-6">
                <span></span>
                <p style="color: #dcdcdc">电机
                  <font style="color: #5DCBFF;">{{ dj }}</font>
                </p>
              </div>
              <div class="Trd-icon1-7">
                <span></span>
                <p style="color: #dcdcdc">点位
                  <font style="color: #5DCBFF;">{{ czbh }},{{ bqbh }}</font>
                </p>
              </div>
            </div>
          </div>
          <!-- 地图部分 -->
          <div class="Trd-map1" v-if="typeof this.result == 'undefined' || this.result == null">
            暂无电子地图</div>
          <div class="Trd-map" v-else ref="chinaMapChart"></div>
        </div>
      </div>

      <!-- 右边 -->
      <div class="contentRight">
        <!-- 算法分析统计信息 -->
        <div class="Information">
          <div class="title">
            <p>算法能力统计
              <span style="position: absolute;right: 0.7%;font-size: 10px;font-family: Source Han Sans CN;font-weight: 400;cursor: pointer;text-decoration: none;font-family: none;">
              <router-link :to="'/nssc/bggl/sftjxx'">更多</router-link>
              <span style="margin-left: 3px;width: 20px;height: 2px;display: block;background-color: #16A7EF;"></span>
            </span>
            </p>
          </div>
          <div class="InforBox">
            <div id="app">
              <div id="container" ref="chinaMapChart4"  style="height: 100%"></div>
            </div>
          </div>
        </div>
        <!-- 采集结果 -->
        <div class="Collection-result">
          <div class="cj-title">
            <p>巡检分析
              <span style="position: absolute;right: 0.7%;font-size: 10px;font-family: Source Han Sans CN;font-weight: 400;cursor: pointer;text-decoration: none;font-family: none;">
              <router-link :to="'/nssc/bggl/cjjgreport'">更多</router-link>
              <span style="margin-left: 3px;width: 20px;height: 2px;display: block;background-color: #16A7EF;"></span>
            </span>
            </p>
          </div>
          <div class="cj-content">
            <vue-seamless-scroll :data="ulData" style="height:200px; width:100%">
              <ul class="list">
                <li :class="ulData.state == '1' ? 'red' :'green'" v-for="(ulData, index) in ulData" :key="index">
                  <span class="span1" :title="ulData.name">{{ ulData.name}}</span>
                  <span>{{ ulData.time }}</span>
                  <!--                  <span style="cursor: pointer;text-decoration:underline;" v-if="ulData.video_url!=null && ulData.video_url!=''" @click="handleViewVD2(ulData.video_url)">视频</span>
                                    <span v-else>-&#45;&#45;</span>-->
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
        <!-- 滤池运行评价指数 -->
        <div class="Filter">
          <div class="Filter-title">
            <p>滤池运行评价指标</p>
          </div>
          <!-- echarts部分 -->
          <div class="FilterBox">
            <div class="FilterBox1">
              <div class="time" @click="Timeclick">
                <p style="color: #5DCBFF"><router-link :to="'/nssc/bggl/zhzb'">更多</router-link></p>
                <span v-show="isShow"></span>
              </div>
            </div>
            <div class="Filter-echarts" ref="chart4"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 视频回放对话框-->
    <el-dialog :title="title" :visible.sync="open" width="900px">
      <videoPlayer class="vjs-custom-skin videoPlayer" ref="videoplayer" :playsinline="true" width="750px" height="250px"
                   :options="playerOptions" customEventName="changed">
      </videoPlayer>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false" style="width: 80px;height: 30px;background: #0e2356;">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {videoPlayer} from "vue-video-player";
import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';
import 'videojs-contrib-hls';
import * as echarts from 'echarts';
// 引入flvjs
import flvjs from 'flv.js'
import FlvExtend from 'flv-extend';
import{ flvVideo, flvStop} from '@/api/nssc/guanlang/guanlang';
import rbt from '@/assets/images/rbt1.png'
import rbt1 from '@/assets/imgs/rbt4.png';
import point from '@/assets/imgs/point1.png';
import { HKonline } from "@/api/nssc/hkvideo/video";
import {getTrackMaprobot,jqrdataCmd,listonPageRobotConfig,reportsAlarmsGather,ippingCmd,listConfig} from "@/api/nssc/home/home";
import $ from "jquery";
import {bggjlsgltjTask, lczbinfoTask} from "@/api/nssc/patroltask/patroltask";
import {getResultVideo, sfnltjxxResult} from "@/api/nssc/aerationresult/aerationresult";
let myChart = null;
let myChart1 = null;
let myChart4 = null;
let myChart8 = null;
export default {
  components: {
    videoPlayer,
  },
  data() {
    return {
      howWidth: 12,
      playerOptions: {
        width: "750px",
        height: "250px",
        language: "zh-CN",
        playbackRates: [0.7, 1.0, 1.5, 2.0],// 播放速度
        muted: false,// 默认情况下将会消除任何音频
        autoplay: false,// 如果true,浏览器准备好时开始回放。
        controls: true, //不显示暂停、声音、进度条组件
        loop: false, // 视频一结束就重新开始。
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        sources: [
          {
            type: "video/mp4",
            src: "", // url地址
          },
        ],
        controlBar: {
          timeDivider: false, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: true, // 是否显示剩余时间功能
          fullscreenToggle: true, // 是否显示全屏按钮
        }
      },
      robot_state: -1,//在线离线
      Selection: localStorage.getItem("robot_name"),//当前选中的机器人id
      robotid: localStorage.getItem("robot_config_id"),
      index: 0,
      //是否显示弹出层
      open: false,
      ulData: [
        {name: '暂无数据',time: ''}
      ],
      title:"",
      videoShow: false,
      online: -1,//在线或离线，默认离线
      isShow: true,//默认显示实时的小横条
      isShow1: false,
      isShow2: false,
      count: 0,
      result: [],
      webRtcServer: null,//摄像头服务
      jqrfx: '无', //机器人方向
      jqrsd: '无',//机器人速度设定
      jqrms: '无',//机器人模式
      sswy: '无',//实时位移
      djzs: '0',//电机转速
      dcdy:'无',//电池电压
      dcdl:'无',//电池电量
      bqbh:'无',//标签编号
      czbh:'无',//池子编号
      dj :"无",
      zmd :"无",
      reports: '0',//当前报告
      alarms: '0',//当前告警
      bufangSum:'0', //当前布防数量
      lcjktz:0,//滤池健康体征
      glzbjs:0,//过滤指标监视
      fxzbpc:0,//反洗指标评测
      zpf:0,//总评分
      timer: null,//定时器
      robotList: [], //机器人列表
      lczpf: 0,  //总评分
      //单滤格综合评分
      lv_r:0,
      lv_s:0,
      lv_t:0,
      lv_u:0,
      lv_v:0,
      lv_w:0,
      lv_x:0,
      lv_y:0,
      form1:{
        bgsl:0,
        bjsl:0,
        glylsl:0,
        lsgjsl:0
      },
      queryParams: {
        robot_name: undefined //机器人名称
      },queryparms4: {
        valu: undefined,
        video_ip1: localStorage.getItem("video_ip1"),
        video_name1: localStorage.getItem("video_name1"),
        video_pwd1: localStorage.getItem("video_pwd1"),
        video_port1: localStorage.getItem("video_port1"),
        robot_config_id: localStorage.getItem("robot_config_id"),
      }, queryParams2: {
        robotid: undefined,
      }, queryParams3: {
        robotid: undefined,
      }, queryParams4: {
        robot_config_id: undefined,
      },queryParams7: {
        create_times: [this.dealWithTime(new Date()), this.dealWithTime1(new Date())]
      },
      // 布防查询参数
      queryParams1: {
        pageNum: 1,
        pageSize: 8,
        ip: undefined
      },
      queryParams6: {
        pond_num:null,
      },
      //已布防个数
      ybf:'0' ,

      rtspUrl:'', //rtsp视频流地址
      flvUrl:null,//请求回来的flv视频流地址
      flvPlayer: null
    }
  },
  created() {
    //初始化页面加载方法
    this.getList();//机器人列表
    this.getMap();//电子地图
    this.reportsAlarmsGather();//当前机器人告警、报告数量、采集结果
  },
  mounted() {
    $("#robotxj").text(localStorage.getItem("robot_name") == null?"南市水厂巡检监控":localStorage.getItem("robot_name")+"巡检监控");
    //加载完页面加载方法
    this.pjzbxx();//滤池评价指数图
    this.sftjxxzh();//算法能力统计
    //定时器轮询程序
    this.timer = setInterval(() => {
      this.getList();//机器人列表
      this.getMap();//电子地图
      this.sftjxxzh();//算法统计信息总数
      this.reportsAlarmsGather();//当前机器人告警、报告数量、采集结果
      this.robotdata();//当前机器人数据
      this.bggjlsgltj();//统计巡检报告、告警信息、漏水告警、管廊预览数量
      //this.getBFList();//告警数量
      if (this.index++ >= this.ulData.length) this.index = 0;//采集结果
      // console.log("首页定时")
    }, 2000)
    this.HKonlines() //摄像头在线离线
    //判断ip是否通
    if(localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != ""){
      this.stopFlvVideo() //停止flv流
      ippingCmd(localStorage.getItem("video_ip1")).then(response =>{
        if(typeof (response.data)!= "undefined" && response.data != null && response.data == true ) {
          this.flvSpbf();
        }else{
          console.log("摄像头ip:" + localStorage.getItem("video_ip1") + "ping不通" )
        }
      })
    }else{
      console.log("摄像头ip:"+localStorage.getItem("video_ip1")+"为空！")
    }
  },
  beforeDestroy() {
    if(this.rtspUrl != null||this.rtspUrl != ""){this.rtspUrl = "";}
    if(this.flvPlayer != null){this.flvPlayer.destroy();this.flvPlayer = null;}
    this.stopFlvVideo() //停止flv流

    if(myChart != null){myChart.clear();myChart = null;}
    if(myChart1 != null){myChart1.clear();myChart1 = null;}
    if(myChart4 != null){myChart4.clear();myChart4 = null;}
    if(myChart8 != null){myChart8.clear();myChart8 = null;}
    if(this.timer) {clearInterval(this.timer);}
  },
  methods: {
    //日期格式化
    dealWithTime(date) {
      let Y = date.getFullYear()
      let M = date.getMonth() + 1 - 0 >= 10 ? Number(date.getMonth()) + 1 : '0' + (Number(date.getMonth()) + 1)
      let D = date.getDate()-6;
      let D1 = D > 10 ? D:"0"+D;
      return Y + '-' + M + '-' + D1
    }, dealWithTime1(date) {
      let Y = date.getFullYear()
      let M = date.getMonth() + 1 - 0 >= 10 ? Number(date.getMonth()) + 1 : '0' + (Number(date.getMonth()) + 1)
      let D = date.getDate() > 10 ? date.getDate():"0"+date.getDate();
      return Y + '-' + M + '-' + D
    },
    sftjxxzh() {
      sfnltjxxResult(this.queryParams7).then(response => {
        let fxzsctj = 0;//分析总时长统计
        let fxspzstj = 0;//视频总数统计
        let spzzstj = 0;//视频总帧数统计
        let spgjzztj = 0;//视频关键帧总统计
        if(typeof response.data.sfnltj!='undefined') {
          const size_sfnltj = response.data.sfnltj.length;
          for(let x=0;x < size_sfnltj;x++) {
            fxzsctj=fxzsctj + parseInt(response.data.sfnltj[x].fxsc);
            fxspzstj=fxspzstj + parseInt(response.data.sfnltj[x].spsl);
            spzzstj=spzzstj + parseInt(response.data.sfnltj[x].spzs);
            spgjzztj=spgjzztj + parseInt(response.data.sfnltj[x].gjzs);
          }
          if(size_sfnltj > 0 ) {
            this.sftjxx(fxzsctj,fxspzstj,spzzstj,spgjzztj);//算法统计信息总数
          } else {
            this.sftjxx(0, 0, 0, 0);//算法统计信息总数
          }
        } else {
          if(myChart4 != null) myChart4.dispose()//销毁echarts
        }
      });
    },
    //算法统计信息总数
    sftjxx(fxzsctj,fxspzstj,spzzstj,spgjzztj) {
      setTimeout(() => {
        myChart4 = echarts.init(this.$refs.chinaMapChart4)
        let option4;
        option4 = {
          cursor: 'default',//取消鼠标变成小手
          xAxis: {
            type: 'category',
            axisLine: {
              show: false, // 不显示坐标轴线
              lineStyle: {
                color: '#00ccff', //x轴的颜色
              },
            },
            //横坐标值颜色
            axisLabel: {
              show: true,
              textStyle: {
                color: '#7287ab'
              }
            },
            splitLine: {
              show: false // 不显示网格线
            },
            axisTick: { show: false },
            data: ['视频数', '分析时长', '关键帧数', '总帧数']
          },
          yAxis: {
            show: false, // 隐藏Y轴
            type: 'value',
            axisTick: {
              show: true,  //刻度线
            },
            axisLabel: {
              show: true, //隐藏刻度值
              fontSize: 10 // 设置 y 轴字体大小为16
            },
            axisLine: {
              show: true,//隐藏y轴
              lineStyle: {
                color: '#00ccff', //x轴的颜色
              },
            } ,
            splitLine: {
              show: false // 不显示网格线
            },
          },
          series: [
            {
              data: [
                {
                  value: fxspzstj,
                  itemStyle: {
                    color: '#0aa95b'
                  },
                  type: 'bar',
                  barWidth: '4%',
                  label: {
                    show: true, // 显示数值
                    position: 'top' // 数值显示的位置
                  }
                },
                {
                  value: fxzsctj,
                  itemStyle: {
                    color: '#058abb'
                  },
                  type: 'bar',
                  barWidth: '4%',
                  label: {
                    show: true, // 显示数值
                    position: 'top' // 数值显示的位置
                  }
                },
                {
                  value:spgjzztj,
                  itemStyle: {
                    color: '#cc8a0e'
                  },
                  type: 'bar',
                  barWidth: '4%',
                  label: {
                    show: true, // 显示数值
                    position: 'top' // 数值显示的位置
                  }
                },
                {
                  value: spzzstj>0?(spzzstj/10000).toFixed(4):0,
                  itemStyle: {
                    color: '#1d6ee8'
                  },
                  type: 'bar',
                  barWidth: '4%',
                  label: {
                    show: true, // 显示数值
                    formatter: '{c}万', // {c}为当前数值
                    position: 'top' // 数值显示的位置
                  }
                },
              ],
              type: 'bar'
            }
          ]
        };
        if (option4 && typeof option4 === 'object') {
          myChart4.setOption(option4);
        }
        window.addEventListener("resize", () => {
          if(myChart4!=null)myChart4.resize();
        });//同比缩放
      } , 1);
    },
    //巡检采集视频
    handleViewVD2(video_url) {
      getResultVideo(video_url).then(response => {
        if(typeof response.data !="undefined"){
          let videopath = response.data.videopath;
          if(videopath!="") {
            this.open = true;
            this.title = "查看结果视频";
            this.playerOptions.sources[0].src = videopath;
          }else {
            this.$modal.msg("未查到结果视频！");
          }
        }else {
          this.$modal.msg("未查到结果视频！");
        }
      });
    },//预览功能
    //flv视频
    flvSpbf(){
      const rtspUrl = {
        rtspUrl : 'rtsp://' + localStorage.getItem("video_name1") + ':' + localStorage.getItem("video_pwd1") + '@' + localStorage.getItem("video_ip1") + ':' + 554 + '/h264/ch1/main/av_stream'
      }
      flvVideo( rtspUrl ).then(response => {
        this.flvUrl = response.data
        this.createFlvPlayer(response.data)
      })
    },
    //播放flv 的固定代码
    createFlvPlayer(flvUrl) {
      // 根据FLV URL创建播放器实例
      if (flvjs.isSupported()) {
        const videoElementH = document.getElementById('videoHK')
        if (videoElementH) {
          // 配置需要的功能
          this.flvPlayer  = new FlvExtend({
            element: videoElementH, // *必传
            frameTracking: true, // 开启追帧设置
            updateOnStart: true, // 点击播放后更新视频
            updateOnFocus: true, // 获得焦点后更新视频
            reconnect: true, // 开启断流重连
            reconnectInterval: 0 // 断流重连间隔
          })
          // 调用 init 方法初始化视频
          // init 方法的参数与 flvjs.createPlayer 相同，并返回 flvjs.player 实例
          const player = this.flvPlayer.init(
              {
                type: 'flv',
                url: flvUrl,
                isLive: true
              },
              {
                enableStashBuffer: false, // 如果您需要实时（最小延迟）来进行实时流播放，则设置为false
                autoCleanupSourceBuffer: true, // 对SourceBuffer进行自动清理
                stashInitialSize: 128, // 减少首帧显示等待时长
                enableWorker: true // 启用分离的线程进行转换
              }
          )
          // 直接调用play即可播放
          player.play()
        }
      }
    },
    //停止flv视频流
    stopFlvVideo(){
      flvStop().then(response=>{})
    },
    //机器人选择
    handleChange(value) {
      const selectedRobot = this.robotList.find(item => item.id === value);
      localStorage.removeItem("video_ip1");//删除1摄像头ip
      localStorage.removeItem("video_port1");//删除1摄像头端口
      localStorage.removeItem("video_name1");//删除1摄像头账号
      localStorage.removeItem("video_pwd1");//删除1摄像头密码
      localStorage.removeItem("robot_name");//删除机器人名称
      localStorage.removeItem("robot_config_id");//删除机器人id
      localStorage.removeItem("robot_state");//删除机器人状态
      localStorage.setItem("video_ip1", selectedRobot.video_ip1);//存储值
      localStorage.setItem("video_port1", selectedRobot.video_port1);//存储值
      localStorage.setItem("video_name1", selectedRobot.video_name1);//存储值
      localStorage.setItem("video_pwd1", selectedRobot.video_pwd1);//存储值
      localStorage.setItem("robot_name", selectedRobot.robot_name);//存储值
      localStorage.setItem("robot_config_id", selectedRobot.id);//存储值
      localStorage.setItem("robot_state", selectedRobot.robot_state);//存储值

      localStorage.setItem("guanlangxj",this.guanlangxj)
      localStorage.setItem("robotxj",this.robotxj)
      localStorage.setItem("Inception",this.Inception)

      this.robot_name = localStorage.getItem("robot_name")
      this.robot_state = localStorage.getItem("robot_state")
      this.robotid = localStorage.getItem("robot_config_id")

      //摄像头参数
      this.queryparms4.video_ip1 = localStorage.getItem("video_ip1");
      this.queryparms4.video_name1 = localStorage.getItem("video_name1");
      this.queryparms4.video_pwd1 = localStorage.getItem("video_pwd1");
      this.queryparms4.video_port1 = localStorage.getItem("video_port1");
      this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
      $("#robotxj").text(localStorage.getItem("robot_name") == null ? "南市水厂巡检监控" : localStorage.getItem("robot_name") + "巡检监控");
      this.HKonlines(); //摄像头在线离线状态
      //判断ip是否通
      if(localStorage.getItem("video_ip1") != null && localStorage.getItem("video_ip1") != ""){
        this.stopFlvVideo() //停止flv流
        ippingCmd(localStorage.getItem("video_ip1")).then(response =>{
          if(typeof (response.data)!= "undefined" && response.data != null && response.data == true ){
            if(this.flvPlayer != null){this.flvPlayer.destroy();this.flvPlayer = null;}
            this.flvSpbf();
          }else{
            console.log("摄像头ip:" + localStorage.getItem("video_ip1") + "ping不通" )
          }
        })
      }else{
        console.log("摄像头ip:"+localStorage.getItem("video_ip1")+"为空！")
      }
    },

    //摄像头在线或离线状态
    HKonlines() {
      if (localStorage.getItem("video_ip1") != null
          && localStorage.getItem("video_name1") != null
          && localStorage.getItem("video_pwd1") != null
          && localStorage.getItem("video_port1") != null
          && localStorage.getItem("robot_config_id") != null
      ) {
        this.queryparms4.robot_config_id = localStorage.getItem("robot_config_id");
        HKonline(this.queryparms4).then(response => {
          this.online = response.data[0].hKloginValue
          //判断是否展示视频
          if (this.online != -1) {
            this.videoShow = true  //摄像头在线则展示视频画面
          } else {
            this.videoShow = false  //摄像头不在线则不展示视频画面
          }
        });
      } else {
        this.$modal.msg("海康摄像头账号为空")
        this.videoShow = false //账号为空则不展示视频画面
      }
    },//查询机器人列表
    getList() {
      this.loading = true;
      listonPageRobotConfig().then(response => {
        this.robotList = response.rows;
        this.robot_state = localStorage.getItem("robot_state")
        const robot_len = this.robotList.length;
        for (let j = 0; j < robot_len; j++) {
          if (this.robotList[j].id == localStorage.getItem("robot_config_id")) {
            this.robot_state = this.robotList[j].robot_state
            break
          }
        }
        this.loading = false;
      });
    },//统计巡检报告、告警信息、漏水告警、管廊预览数量
    bggjlsgltj() {
      this.queryParams3.robot_config_id = localStorage.getItem("robot_config_id");
      bggjlsgltjTask(this.queryParams3).then(response => {
        this.form1 = response.data.bggjlsgl;
      });
    },//当前机器人数据
    robotdata() {
      this.queryParams3.robotid = localStorage.getItem("robot_config_id");
      if (typeof this.queryParams3.robotid != "undefined" && this.queryParams3.robotid != null) {
        jqrdataCmd(this.queryParams3).then(response => {
          if (typeof (response.data) != "undefined" && response.data != null) {
            this.jqrfx = response.data.jqrfx; //机器人方向
            this.jqrsd =  response.data.jqrsd;//机器人速度设定
            this.jqrms = response.data.jqrms; //机器人模式
            this.sswy = response.data.sswy;//实时位移
            this.djzs =  response.data.djzs;//电机转速
            this.dcdl =  response.data.dcdl;//电池电量
            this.dcdy =response.data.dcdy;//电池电压
            this.sxt = response.data.sxt;//摄像头状态
            this.dj = response.data.dj;//电机
            this.czbh = response.data.czbh;//池子编号
            this.bqbh = response.data.bqbh;//标签编号
          } else {
            this.jqrfx = "无"; //机器人方向
            this.jqrsd = "无";//机器人速度设定
            this.jqrms = "无"; //机器人模式
            this.sswy = "无";//实时位移
            this.dcdl = "无"; //电池电量
            this.dcdy = "无"; //电池电压
            this.djzs = "无";//电机转速
            this.dj = "无";
            this.zmd ="无";
            this.czbh ="无";
            this.bqbh ="无";
          }
        });
      } else {
        this.jqrfx = "无"; //机器人方向
        this.jqrsd = "无";//机器人速度设定
        this.jqrms = "无"; //机器人模式
        this.sswy = "无";//实时位移
        this.dcdl = "无"; //电池电量
        this.dcdy = "无"; //电池电压
        this.djzs = "无";//电机转速
        this.dj = "无";
        this.zmd ="无";
        this.czbh ="无";
        this.bqbh ="无";
      }
    },//当前机器人告警、报告数量
    reportsAlarmsGather() {
      this.queryParams4.robot_config_id = localStorage.getItem("robot_config_id");
      if (typeof this.queryParams4.robot_config_id != "undefined" && this.queryParams4.robot_config_id != null) {
        reportsAlarmsGather(this.queryParams4).then(response => {
          if (typeof (response.data) != "undefined" && response.data != null) {
            /* if(response.data.reportalarm != null && response.data.reportalarm.length == 2 ) {
               this.reports = response.data.reportalarm[0].bgbjct; //当前报告
               this.alarms = response.data.reportalarm[1].bgbjct; //当前告警
             }*///采集结果
            this.ulData = (response.data.gather != null && response.data.gather.length > 0)?response.data.gather:this.ulData;
          }
        });
      }
    }, //滤池评价指标
    pjzbxx() {
      lczbinfoTask(this.queryParams6).then(response => {
        //滤池评价详情
        if(typeof response.data!="undefined" && response.data!=null) {
          //单滤格综合评分
          this.lv_r = (typeof response.data.lv_r!="undefined"&&response.data.lv_r!=null&&response.data.lv_r!='')?response.data.lv_r:0;
          this.lv_s = (typeof response.data.lv_s!="undefined"&&response.data.lv_s!=null&&response.data.lv_s!='')?response.data.lv_s:0;
          this.lv_t = (typeof response.data.lv_t!="undefined"&&response.data.lv_t!=null&&response.data.lv_t!='')?response.data.lv_t:0;
          this.lv_u = (typeof response.data.lv_u!="undefined"&&response.data.lv_u!=null&&response.data.lv_u!='')?response.data.lv_u:0;
          this.lv_v = (typeof response.data.lv_v!="undefined"&&response.data.lv_v!=null&&response.data.lv_v!='')?response.data.lv_v:0;
          this.lv_w = (typeof response.data.lv_w!="undefined"&&response.data.lv_w!=null&&response.data.lv_w!='')?response.data.lv_w:0;
          this.lv_x = (typeof response.data.lv_x!="undefined"&&response.data.lv_x!=null&&response.data.lv_x!='')?response.data.lv_x:0;
          this.lv_y = (typeof response.data.lv_y!="undefined"&&response.data.lv_y!=null&&response.data.lv_y!='')?response.data.lv_y:0;
          //总评分
          this.lczpf = ((this.lv_r+this.lv_s+this.lv_t+this.lv_u+this.lv_v+this.lv_w+this.lv_x+this.lv_y)/8).toFixed(2);
        }
        this.pjzscharts();//反洗指标测评
      });
    },//查询布防摄像头列表
    getBFList() {
      this.loading = true;
      listConfig(this.queryParams1).then(response => {
        this.bufangSum = response.total;
        this.loading = false;
      });
    },//电子地图
    getMap() {
      this.queryParams2.robotid = localStorage.getItem("robot_config_id")
      getTrackMaprobot(this.queryParams2).then(response => {
        if (typeof response.data!= "undefined" && response.data != null && response.data.dzdt.length > 0) {
          this.result = response.data.dzdt;
          this.arrdata = [[]];//初始化地图值
          if (typeof (response.data.positionxy) != "undefined" && response.data.positionxy != "unxy") {
            let positionxy = response.data.positionxy.split(",");//xy坐标
            localStorage.removeItem("xposition");//删除键值  机器人开始位置x坐标
            localStorage.removeItem("yposition");//删除键值 机器人开始位置y坐标
            localStorage.removeItem("xjbh");//删除键值 机器人开始位置y坐标
            localStorage.setItem("xposition", positionxy[0]);//存储值 机器人开始位置x坐标
            localStorage.setItem("yposition", positionxy[1]);//存储值 机器人开始位置y坐标
            localStorage.setItem("xjbh", response.data.xjbh);//存储值 巡检点编号
          }
          const result_len = this.result.length;
          for (let i = 0; i < result_len; i++) {
            //因为后台取出来的数据是一行的，字符串形式
            let dataArray = this.result[i].xyposition.split(",");
            //这句话是必须的，每次都要新建一个一维数组,不然会报错
            this.arrdata[i] = new Array();
            const data_len = dataArray.length;
            for (let j = 0; j < data_len; j++) {
              this.arrdata[i][j] = dataArray[j];
            }
          }//电子地图
          if (this.count % 2 == 0)
            this.initEcharts(this.arrdata, localStorage.getItem("xposition"),localStorage.getItem("yposition"),localStorage.getItem("xjbh"),1);//交替getMap
          else
            this.initEcharts(this.arrdata,localStorage.getItem("xposition"),localStorage.getItem("yposition"),localStorage.getItem("xjbh"),2);
          this.count += 1;
        } else {
          if(myChart != null) myChart.dispose()//销毁echarts
          this.result = null;
        }
      });
    },//电子轨道图方法
    initEcharts(dtop, xposition, yposition, xjbh,fg) {
      if (this.$refs.chinaMapChart) {
        this.$nextTick(() => {
          myChart = echarts.init(this.$refs.chinaMapChart)
          let option;
          //轨道地图数据
          const data = dtop;
          let img = document.createElement('img');
          img.src = (this.picpath == null || this.picpath == '') ? require('@/assets/images/map-default.png')
              : this.picpath;
          option = {
            tooltip: {
              trigger: 'item',
              formatter: (params) => {  // params就是数据，这里可以打印一下看看
                // return 出去什么，鼠标移入就显示什么,marker就是提示前面蓝色的圆点
                if (typeof params.data[0] == 'undefined') {
                  return ``
                } else {
                  return `${params.data[2]}</br>${params.marker}横坐标:${params.data[0]}</br>纵坐标:${params.data[1]}`
                }
              }
            },
            //backgroundColor:'#d0defa',//地图背景色
            title: {
              /* text: '机器人巡检轨迹图',*/
              left: 'center'
            },
            grid: {//底图四个方向调整
              top: '10%',
              bottom: '1%',
              left: '2%',
              right: '2%'
            },
            xAxis: {
              splitLine: { //网格线
                show: false
              },
              type: 'value',
              axisLine: {
                onZero: false,
                show: false//隐藏y轴
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false, //隐藏刻度值
              }
            },
            yAxis: {
              splitLine: { //网格线
                show: false
              },
              type: 'value',
              axisLine: {
                onZero: false,
                show: false//隐藏y轴
              },
              axisTick: {
                show: false,  //刻度线
              },
              axisLabel: {
                show: false, //隐藏刻度值
              }
            },
            series: [
              {
                label: {
                  //color: '#cefc04',
                  show: true,
                  position: "top",
                  formatter: '{@value}',// 点旁边显示label，这里使用name: '横坐标'这样写也可以，鼠标移入出现提示。
                  textStyle: { color: '#fcf804', fontSize: 8 }
                },
                id: 'a',
                /* type: (this.picpath == null || this.picpath == '') ? 'line':'scatter',//scatter 散点，line 曲线*/
                type: 'line',
                smooth: true,// true 曲线
                itemStyle: {
                  // 设置线条颜色
                  normal: {
                    color: {
                      colorStops: [{
                        offset: 0.5, color: '#042f9b' // 0% 处的颜色
                      }, {
                        offset: 1, color: '#032593' // 100% 处的颜色
                      }]
                    },
                    lineStyle: {
                      width: (this.picpath == null || this.picpath == '') ? 4 : 4,
                      type: (this.picpath == null || this.picpath == '') ? 'solid' : 'solid'//可选值还有 dotted  solid
                    }
                  }
                },
                symbolSize: 6,//巡检点大小
                symbol: 'image://' + point,//巡检点图标
                data: data,
                //  symbol: 'circle',
                markPoint: {
                  label: {
                    color: '#53fcb5',  // 文字颜色
                    // padding: [0, 0,-10, 0], // 可用padding调整图片内文字距离
                    show: true,
                    //formatter: '巡检机器人'// 自定义文字内容
                  },
                  //机器人大小
                  itemStyle: {
                    color: {
                      type: 'linear',
                      colorStops: [{
                        offset: 0, color: 'blue' // 0% 处的颜色
                      }, {
                        offset: 1, color: 'blue' // 100% 处的颜色
                      }]
                    }
                  },
                  //symbol: 'circle',
                  symbol: fg == 1 ? 'image://' + rbt : 'image://' + rbt1,
                  // 自定义图片作为标注展示
                  // symbolSize: [58, 38],  // 调整图片的长宽
                  // symbolOffset: [10, '-50%'],  // 调整标注图片的位移方向 大小
                  symbolSize: 18,//机器人大小
                  data: [{//1机器人移动坐标位置
                    xAxis: xposition,
                    yAxis: yposition,
                    value: xjbh,
                    fontSize: 8
                  }
                  ],
                }
              },
              // 闪烁点的重点是以下配置
              {
                // 设置圆心点特效动画、大小
                type: 'effectScatter', data: dtop,
                symbolSize: 5,
                coordinateSystem: 'cartesian2d',
                // 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮（hover）的时候显示特效
                showEffectOn: 'render',
                // 涟漪特效配置
                rippleEffect: {
                  color: '#132be1',
                  scale: 4,
                  // 波纹的绘制方式,可选'stroke'和'fill'
                  brushType: 'stroke'
                },
                //圆心点
                hoverAnimation: true,
                itemStyle: {
                  normal: {
                    color: '#071cad',
                    shadowBlur: 80,
                    shadowColor: '#05399b',
                  }
                },
                zlevel: 1
              }
            ]
          }
          if (option && typeof option === 'object') {
            myChart.setOption(option);
          }
          window.addEventListener("resize", () => {
            if(myChart!=null)myChart.resize();
          });//电子地图同比缩放
        })
      }
    },//滤池运行评价指数总评分
    pjzscharts() {
      let option;
       option = {
        title: {
          text: this.lczpf + '%',
          left: 'center',
          top: '45%',
          itemGap: 10,
          textStyle: {
            color: '#fff',
            fontSize: '20',
            fontWeight: 600
          },
        },
        angleAxis: {
          max: 100,
          // 隐藏刻度线
          show: false,
          startAngle: 90
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false
          },
        },
        polar: {
          radius: '100%' //图形大小
        },
        series: [{
          type: 'bar',
          data: [this.lczpf],
          showBackground: true,
          roundCap: true,
          backgroundStyle: {
            color: '#404C4C',
          },
          coordinateSystem: 'polar',
          barWidth: 14,
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#3C88E9'
                }, {
                  offset: 1, color: '#3FC0E1'
                }],
                global: false
              }
            }
          },
        }]
      }
      //通过$ref进行挂载
      myChart8 = echarts.init(this.$refs.chart4);
      myChart8.setOption(option);
      window.addEventListener("resize", () => {
        if (myChart8 != null) myChart8.resize();
      });//同比缩放
    },
    Timeclick() {
      this.isShow1 = false;
      this.isShow = true;
      this.isShow2 = false;
    },
    Daysclick() {
      this.isShow1 = true;
      this.isShow = false;
      this.isShow2 = false;
    },
    Monthclick() {
      this.isShow1 = false;
      this.isShow = false;
      this.isShow2 = true;
    }
  }
}
</script>
<style>
.home .content .contentLsft .Robot-par .par-title[data-v-2d65e41c] .el-input--medium .el-input__inner {
  border: none !important;
  background: transparent !important;
}
</style>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.TBcontent::-webkit-scrollbar {
  display: none; /* 隐藏滚动条（仅适用于webkit内核的浏览器，如Chrome、Safari） */
}

@keyframes fadeUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.home {
  width: 100%;
  height: calc(100vh - 35px);
  background-image: url(../images/beijin.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100% 100%;
  background-size: cover;
  //头部开始
  .header {
    width: 100%;
    height: 42px;
    background-image: url(../images/head.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    .header-title {
      width: 82%;
      display: flex;
      //background-color: #74C5F4;
      //justify-content: end;
      align-items: center;
      .p1 {
        letter-spacing:3px;
        width: 48%;
        margin-left: 46.5%;
        font-size: 36px;
        font-family: PangMenZhengDao;
        font-weight: 400;
        font-style: italic;
        color: #FFFFFF;
        background: linear-gradient(0deg, #74C5F4 0%, #F3F6F0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .p2 {
        letter-spacing:3px;
        width: 48%;
        margin-left: 52.5%;
        font-size: 36px;
        font-family: PangMenZhengDao;
        font-weight: 400;
        font-style: italic;
        color: #FFFFFF;
        background: linear-gradient(0deg, #74C5F4 0%, #F3F6F0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .header-time {
      width: 15%;
      //background-color: aquamarine;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      p:nth-child(1) {
        font-size: 14px;
        font-family: Bahnschrift;
        font-weight: normal;
        color: #FFFFFF;
        margin-right: 10px;
      }
      p:nth-child(2) {
        font-size: 16px;
        font-family: Bahnschrift;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }
  //内容区域开始
  .content {
    width: 100%;
    //height: 100%;
    display: flex;
    //左边开始
    .contentLsft {
      width: 25%;
      min-height: calc(100vh - 110px);
      //background-color: #74C5F4;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      //机器人参数
      .Robot-par {
        width: 98%;
        height: 60%;
        //background-color: chocolate;
        display: flex;
        flex-direction: column;
        //justify-content: center;
        align-items: center;
        .par-title {
          width: 98%;
          height: 34px;
          background-image: url(../images/banner.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          >p {
            margin-top: 4px;
            margin-left: 20px;
            font-size: 20px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            color: #5DCBFF;
          }
          .selBox{
            ::v-deep .el-input--suffix .el-input__inner {
              width: 76px;
              height: 30px;
              line-height: 30px;
            }
          }
          ::v-deep .el-input--suffix .el-input__inner {
            width: 130px;
            height: 30px;
            line-height: 30px;
          }
          ::v-deep .el-input--medium .el-input__inner {
            border: none !important;
          }
        }
        .par-conter {
          width: 98%;
          height: 86%;
          //background-color: #b9e0f7;
          display: flex;
          flex-wrap: wrap;
          .par-conter1 {
            width: 50%;
            height: 35%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: darkseagreen;
            >img {
              width: 70%;
              height: 70%;
            }
            .par-conterText {
              width: 70%;
              height: 20%;
              background-image: url(../images/line1.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              >p {
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 18px;
                background: linear-gradient(0deg, #0083E9 0%, #DEDEDE 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
          .par-conter2 {
            width: 50%;
            height: 35%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: darkseagreen;
            >img {
              width: 70%;
              height: 70%;
            }
            .par-conterText {
              width: 70%;
              height: 20%;
              background-image: url(../images/line2.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              >p {
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 18px;
                background: linear-gradient(0deg, #0083E9 0%, #DEDEDE 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
          .par-conter3 {
            width: 50%;
            height: 35%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: darkseagreen;
            >img {
              width: 70%;
              height: 70%;
            }
            .par-conterText {
              width: 70%;
              height: 20%;
              background-image: url(../images/line3.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
          .par-conter4 {
            width: 50%;
            height: 35%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: darkseagreen;
            >img {
              width: 70%;
              height: 70%;
            }
            .par-conterText {
              width: 70%;
              height: 20%;
              background-image: url(../images/line4.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
        .par-conterJQ {
          width: 98%;
          height: 86%;
          //background-color: #b9e0f7;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          .par-conter1 {
            width: 50%;
            height: 35%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: darkseagreen;
            >img {
              width: 70%;
              height: 70%;
            }
            .par-conterText {
              width: 70%;
              height: 20%;
              background-image: url(../images/line1.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              >p {
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 18px;
                background: linear-gradient(0deg, #0083E9 0%, #DEDEDE 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
          .par-conter2 {
            width: 50%;
            height: 35%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: darkseagreen;
            >img {
              width: 70%;
              height: 70%;
            }
            .par-conterText {
              width: 70%;
              height: 20%;
              background-image: url(../images/line2.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              >p {
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 18px;
                background: linear-gradient(0deg, #0083E9 0%, #DEDEDE 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
          .par-conter3 {
            width: 50%;
            height: 35%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: darkseagreen;
            >img {
              width: 70%;
              height: 70%;
            }
            .par-conterText {
              width: 70%;
              height: 20%;
              background-image: url(../images/line3.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
          .par-conter4 {
            width: 50%;
            height: 35%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: darkseagreen;
            >img {
              width: 70%;
              height: 70%;
            }
            .par-conterText {
              width: 70%;
              height: 20%;
              background-image: url(../images/line4.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
        .par-conterGL {
          width: 98%;
          height: 86%;
          //background-color: #b9e0f7;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          .par-conter1 {
            width: 50%;
            height: 35%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: darkseagreen;
            >img {
              width: 70%;
              height: 70%;
            }
            .par-conterText {
              width: 70%;
              height: 20%;
              background-image: url(../images/line1.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              >p {
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 18px;
                background: linear-gradient(0deg, #0083E9 0%, #DEDEDE 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
        }
      }
      //机器人运行数据
      .Robot-ope {
        width: 98%;
        height: 40%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // background-color: cadetblue;
        .ope-title {
          width: 98%;
          height: 34px;
          background-image: url(../images/banner.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          //align-items: center;
          >p {
            margin-top: 4px;
            margin-left: 20px;
            font-size: 20px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            color: #5DCBFF;
          }
        }
        .ope-conter {
          width: 98%;
          height: 90%;
          display: flex;
          flex-wrap: wrap;
          //background-color: bisque;
          .ope-conter1 {
            width: 50%;
            height: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: indianred;
            .ope-conter1-1 {
              width: 90%;
              height: 63%;
              background-image: url(../images/speed.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              position: relative;
              >p {
                position: absolute;
                top: 46%;
                left: 45%;
                font-size: 14px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #000000;
                background: linear-gradient(-18deg, #9CE2FF 0%, #629DFF 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
            .ope-conter1-2 {
              width: 60%;
              height: 20%;
              background-image: url(../images/triangle.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              position: relative;
              display: flex;
              justify-content: center;
              align-items: center;
              >p {
                position: absolute;
                left: 38%;
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #bfcfda;
              }
            }
          }
          .ope-conter2 {
            width: 50%;
            height: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: indianred;
            .ope-conter1-1 {
              width: 90%;
              height: 63%;
              background-image: url(../images/orientation.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              position: relative;
              >p {
                position: absolute;
                top: 44%;
                left: 45%;
                font-size: 14px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #000000;
                background: linear-gradient(-18deg, #B5FCEF 0%, #85F297 99.4873046875%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
            .ope-conter1-2 {
              width: 60%;
              height: 20%;
              background-image: url(../images/triangle.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              //position: relative;
              display: flex;
              justify-content: center;
              align-items: center;
              >p {
                //position: absolute;
                //left: 38%;
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #bfcfda;
              }
            }
          }
          .ope-conter3 {
            width: 50%;
            height: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: indianred;
            .ope-conter1-1 {
              width: 90%;
              height: 63%;
              background-image: url(../images/pattern.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              position: relative;
              >p {
                position: absolute;
                top: 45%;
                left: 45%;
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #000000;
                background: linear-gradient(-18deg, #FF9CFC 0%, #6D62FF 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
            .ope-conter1-2 {
              width: 60%;
              height: 20%;
              background-image: url(../images/triangle.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              //position: relative;
              display: flex;
              justify-content: center;
              align-items: center;
              >p {
                //position: absolute;
                //left: 38%;
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #bfcfda;
              }
            }
          }
          .ope-conter4 {
            width: 50%;
            height: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            //background-color: indianred;
            .ope-conter1-1 {
              width: 90%;
              height: 63%;
              background-image: url(../images/distance.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              position: relative;
              >p {
                position: absolute;
                top: 47.5%;
                left: 45%;
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #000000;
                background: linear-gradient(-18deg, #9CF7FF 0.2685546875%, #62E0FF 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
            .ope-conter1-2 {
              width: 60%;
              height: 20%;
              background-image: url(../images/triangle.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              //position: relative;
              display: flex;
              justify-content: center;
              align-items: center;
              >p {
                //position: absolute;
                //left: 38%;
                font-size: 12px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #bfcfda;
              }
            }
          }
        }
      }
    }
    //中边开始
    .contentCenter {
      width: 50%;
      //height: 498px;
      min-height: calc(100vh - 110px);
      //background-color: bisque;
      display: flex;
      flex-direction: column;
      justify-content: center;
      //告警数据.................................
      .dataScreen-alarm {
        width: 98%;
        height: 36px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        background-image: url(../../components/images/alarm.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .dataScreen-alaimg>img {
        margin-left: 10px;
        margin-top: 5px;
      }

      #box {
        width: 360px;
        height: 32px;
        overflow: hidden;
        padding-left: 30px;
        // border: 1px solid black;
      }

      .anim {
        transition: all 0.5s;
        margin-top: -30px;
      }

      #con1 li {
        list-style: none;
        line-height: 30px;
        height: 30px;
      }

      .dataScreen-alatext {
        width: 90%;
        height: 80%;
        margin-left: 2%;
        /* margin-top: 8px;*/
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #FFD200;

        //background-color: #34EFBD;
        #box {
          width: 98%;
        }
      }
      //监控视频画面
      .center-video {
        width: 99.8%;
        height: 68%;
        background-image: url(../images/video-frame.gif);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .box {
          width: 100%;
          height: 100% !important;
          display: flex;
          justify-content: center;
          align-items: center;
          //background: #000000;
          //border: 1px solid #00FF00;
          background-image: url(../../components/images/jiankong.png);
          background-repeat: no-repeat;
          background-position: center center;
        }
        .video-js {
          background-color: rgb(1 5 43);
          object-fit: fill;
          //隐藏video播放按钮
        }
        video {
          pointer-events: none;
        }
        //隐藏video播放按钮
        video::-webkit-media-controls-play-button {
          display: none !important;
        }
        //隐藏video音量进度条
        video::-webkit-media-controls-volume-slider {
          display: none !important;
        }
        //隐藏video音量按钮
        video::-webkit-media-controls-mute-button {
          display: none !important;
        }
        video::-webkit-media-controls-toggle-closed-captions-button {
          display: none !important;
        }
        //隐藏当前时间
        video::-webkit-media-controls-current-time-display {
          display: none !important;
        }
        //隐藏剩余时间
        video::-webkit-media-controls-time-remaining-display {
          display: none !important;
        }
        //隐藏进度条
        video::-webkit-media-controls-timeline {
          display: none !important;
        }
        //更多选项
        video::-internal-media-controls-overflow-button {
          display: none !important;
        }
      }
      //电子轨道地图
      .center-Trd {
        width: 99.8%;
        height: 32%;
        margin-top: 1%;
        //background-color: #74C5F4;
        //图标部分
        .Trd-icon {
          width: 99.8%;
          height: 16%;
          //background-color: #85F297;
          display: flex;
          justify-content: center;
          align-items: center;
          .Trd-icon1 {
            width: 90%;
            height: 100%;
            background-image: url(../images/color.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            // background-color: coral;
            display: flex;
            .Trd-icon1-1 {
              width: 30%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              //background-color: #8b7dd6;
              >img {
                width: 23px;
                height: 23px;
              }
              >p {
                margin-left: 2%;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
                //line-height: 30px;
              }
            }
            .Trd-icon1-2 {
              width: 30%;
              height: 100%;
              //background-color: #6D62FF;
              display: flex;
              justify-content: center;
              align-items: center;
              >img {
                width: 28px;
                height: 16px;
              }
              >p {
                margin-left: 2%;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
                //line-height: 30px;
              }
            }
            .Trd-icon1-3 {
              width: 34%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              >span {
                display: block;
                width: 22px;
                height: 10px;
                background: linear-gradient(-85deg, #184e77, #3c84bf);
              }
              >p {
                margin-left: 2%;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
              }
            }
            .Trd-icon1-4 {
              width: 30%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              >span {
                display: block;
                width: 22px;
                height: 10px;
                background: linear-gradient(-85deg, #365084, #7a80fd);
              }
              >p {
                margin-left: 2%;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
              }
            }
            .Trd-icon1-5 {
              width: 30%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              >span {
                display: block;
                width: 22px;
                height: 10px;
                background: linear-gradient(-85deg, #268c76, #1d83a7);
              }
              >p {
                margin-left: 2%;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
              }
            }
            .Trd-icon1-6 {
              width: 30%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              >span {
                display: block;
                width: 22px;
                height: 10px;
                background: linear-gradient(-85deg, #264d8c, #1d7ca7);
              }
              >p {
                margin-left: 2%;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
              }
            }
            .Trd-icon1-7 {
              width: 30%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              >span {
                display: block;
                width: 22px;
                height: 10px;
                background: linear-gradient(-85deg, #263f8c, #1d9ca7);
              }
              >p {
                margin-left: 2%;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
              }
            }
          }
        }
        //电子地图部分
        .Trd-map {
          width: 99.8%;
          height: 83%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .Trd-map1 {
          width: 99.8%;
          height: 82%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #5DCBFF;
          font-size: 20px;
          letter-spacing: 2px;
        }
      }
    }
    //右边开始
    .contentRight {
      width: 25%;
      min-height: calc(100vh - 110px);
      //background-color: rgb(248, 191, 121);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      //统计信息
      .Information{
        width: 99%;
        height: 20%;
        .title{
          width: 98%;
          height: 34px;
          background-image: url(../images/banner.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          //align-items: center;
          >p {
            margin-top: 4px;
            margin-left: 20px;
            font-size: 20px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            color: #5DCBFF;
          }
        }
        .InforBox{
          width: 100%;
          height: 80%;
          display: flex;
          align-items: center;
          justify-content: center;
          #app {
            width:100%;
            height: 100%;
            box-sizing: border-box;
            .box {
              width: 100%;
              height: 35px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-left: 1px solid #2B5B9B;
              border-top: 1px solid #2B5B9B;
              .content1 {
                width: 50%;
                height: 35px;
                line-height: 35px;
                text-align: center;
                background-color: #07164B;
                border-right: 1px solid #2B5B9B;
                border-bottom: 1px solid #2B5B9B;
                border-top: 1px solid #2B5B9B;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #D7D7D7;
              }
              .content2 {
                width: 50%;
                height: 35px;
                line-height: 35px;
                text-align: center;
                background: #0E2356;
                border-right: 1px solid #2B5B9B;
                border-bottom: 1px solid #2B5B9B;
                border-top: 1px solid #2B5B9B;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #D7D7D7;
                font-size: 12px;
              }
            }
          }
        }
      }
      //采集结果开始
      .Collection-result {
        width: 99%;
        height: 40%;
        .cj-title {
          width: 98%;
          height: 34px;
          background-image: url(../images/banner.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          //align-items: center;
          >p {
            margin-top: 4px;
            margin-left: 20px;
            font-size: 20px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            color: #5DCBFF;
          }
        }
        .cj-content {
          width: 99.8%;
          height: 85%;
          display: flex;
          flex-direction: column;
          //justify-content: space-around;
          //align-items: center;
          overflow: hidden;
          /*隐藏溢出部分*/
          ::v-deep .el-table .cell {
            line-height: 15px !important;
          }
          //去掉li的小圆点
          .list {
            width: 100%;
            height: 100%;
            list-style: none;
            font-size: 12px;
            overflow: hidden;
            transition: transform 0.5s;
            /*添加动画效果*/
            //background-color: #85F297;
            li .span1 {
              display: block;
              width: 140px;
              white-space: nowrap; /* 不换行 */
              overflow: hidden; /* 溢出隐藏 */
              text-overflow: ellipsis; /* 溢出部分用省略号表示 */
            }
            li:nth-child(1) {
              margin-top: 5px;
            }
            //li:nth-child(odd) {
            .green{
              height: 35px;
              width: 100%;
              display: flex;
              //text-align: center;
              line-height: 35px; //
              background-image: url(../images/zhenchang.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #35A0F3;
              margin-bottom: 8px;
              animation: fadeUp 0.5s ease-in-out forwards;
              .span1 {
                margin-left: 42px;
              }
              span {
                display: block;
                margin-left: 10px;
              }
            }
            //li:nth-child(even) {
            .red{
              height: 35px;
              width: 100%;
              //background-color: #54e03e;
              display: flex;
              //text-align: center;
              line-height: 35px;
              background-image: url(../images/yichang.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #EF5400;
              margin-bottom: 8px;
              animation: fadeUp 0.5s ease-in-out forwards;
              .span1 {
                margin-left: 40px;
              }
              span {
                display: block;
                margin-left: 10px;
              }
            }
          }
          .fade-enter-active,
          .fade-leave-active {
            transition: opacity 0.5s;
            /*添加淡入淡出动画*/
          }
          .fade-enter,
          .fade-leave-to {
            opacity: 0;
            /*默认隐藏*/
          }
        }
      }
      //滤池运行评价指数
      .Filter {
        width: 99%;
        height: 40%;
        .Filter-title {
          width: 98%;
          height: 34px;
          background-image: url(../images/banner.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          >p {
            width: 90%;
            height: 100%;
            display: flex;
            //justify-content: center;
            align-items: center;
            //margin-top: 8px;
            margin-left: 20px;
            font-size: 20px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            color: #5DCBFF;
          }
        }
        .FilterBox {
          width: 100%;
          height: 86%;
          position: relative;
          .FilterBox1 {
            width: 88%;
            height: 10%;
            z-index: 999;
            // background-color: #85F297;
            display: flex;
            justify-content: space-around;
            position: absolute;
            left: 60%;
            top: 5%;
            .time {
              width: 30%;
              height: 80%;
              cursor: pointer;
              >p {
                font-size: 10px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #c7cfd9;
              }
              >span {
                margin-left: 3px;
                width: 20px;
                height: 2px;
                display: block;
                background-color: #16A7EF;
              }
            }
            .days {
              width: 35%;
              height: 80%;
              cursor: pointer;
              >p {
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #FFFFFF;
              }
              >span {
                display: block;
                margin-left: 4px;
                width: 20px;
                height: 2px;
                background-color: #16A7EF;
              }
            }
            .month {
              width: 35%;
              height: 80%;
              cursor: pointer;
              >p {
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #FFFFFF;
              }
              >span {
                display: block;
                margin-left: 4px;
                width: 20px;
                height: 2px;
                background-color: #16A7EF;
              }
            }
          }
          .Filter-echarts {
            width: 100%;
            height: 98%;
            //background-color: #62E0FF;
          }
        }
      }
    }
  }
}
</style>

